<template>
  <m-container class="return-house">
    <out-work-top-pallet-code :palletCode="palletCode" @change="handleChange" scan />

    <template v-if="list.length">
      <m-cell-group weight="label" v-for="(item, index) in list" :key="index">
        <view class="over">
          <view class="item df aic" style="background-color: #f2f7fd; padding: 16rpx; margin-bottom: 20rpx">
            <image src="@/static/icon9.png" mode="scaleToFill" class="icon_box" />
            <view class="right">
              <view class="item">
                <text class="title">零件图号</text>
                <text>{{ item.partNo }}</text>
              </view>
              <view class="item">
                <text class="title">出库数量（个）</text>
                <text>{{ item.packageNumber }}</text>
              </view>
            </view>
          </view>
          <template v-if="item.skuBarcodes.length">
            <in-work-code
              broder
              v-for="(it, ind) in item.skuBarcodes"
              :modal="{ barcode: it.barcode || it }"
              :key="ind"
              :status-type="it.status ? outTaskCodeStatus[it.status].color : 'primary'"
              status-txt=""
            />
          </template>
          <m-empty :margin-top="20" v-else tip="还没有开始扫描条码哦！" />
        </view>
      </m-cell-group>
    </template>
    <m-empty v-else tip="还没有开始扫描条码哦！" />

    <m-fixed v-if="palletCode">
      <view class="df aic jcsb">
        <m-button width="48.5%" size="lg" plain background="#fff" @click="handleClickClear"> 清空托盘 </m-button>
        <m-button width="48.5%" size="lg" @click="handleClickConfirm" :loading="loading"> 确认回库 </m-button>
      </view>
    </m-fixed>
  </m-container>
</template>

<script>
import { outTaskCodeStatus } from '@/utils/constant'
import { getSku } from '@/api/modules/in-work'
import { storageLocationDetails, clearPalletCodeSku, imsStockOutWorkList } from '@/api/modules/out-work'
import { showModal } from '@/hooks'
import { router } from '@/router'

export default {
  data() {
    return {
      palletCode: '',
      outTaskCodeStatus,
      list: [],
      loading: false,
      arr: [],
    }
  },
  // onLoad() {
  //   this.fetchData('WMS-P-000046')
  // },
  methods: {
    async handleChange(barcode) {
      if (this.$Router.currentRoute.name !== 'ReturnHouse') {
        return
      }

      if (barcode.startsWith('WMS-P-')) {
        const { rows } = await imsStockOutWorkList({
          palletCode: barcode,
          status: 1,
        })
        if (rows.length) {
          uni.showToast({
            title: '当前托盘未完成拣货，无法回库！',
            icon: 'none',
          })
          return
        }
        this.fetchData(barcode)
      } else {
        uni.showToast({
          title: '请扫描正确的托盘码',
          icon: 'none',
        })
      }
    },
    async handleClickConfirm() {
      router.push({
        name: 'ConfirmReturnHouse',
        params: {
          palletCode: this.palletCode,
          arr: this.intersectionOfArrays(this.arr).join(),
        },
      })
    },
    async handleClickClear() {
      showModal({
        title: '清空托盘提示',
        content: '请问您确认是否要清空该托盘？',
        showCancelButton: true,
        confirm: async () => {
          await clearPalletCodeSku(this.palletCode)
          this.palletCode = ''
          this.list = []
        },
      })
    },
    intersectionOfArrays(arrays) {
      if (arrays.length === 0) return []
      if (arrays.length === 1) return arrays[0]

      const intersection = arrays[0].filter((item) => {
        return arrays.slice(1).every((array) => array.includes(item))
      })

      return intersection
    },
    async fetchData(palletCode) {
      const { data } = await storageLocationDetails({
        palletCode,
      })
      if (data.length === 0) {
        uni.showToast({
          title: '该托盘码没有对应的出库任务',
          icon: 'none',
        })
        return
      }
      this.palletCode = palletCode
      this.list = data
      for (const item of data) {
        const {
          data: { imsId },
        } = await getSku(item.skuId)

        this.arr.push(imsId.split(','))
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.return-house {
  .over {
    padding: 20rpx 0 25rpx;
    max-height: 650rpx;
    overflow: auto;
    margin: 20rpx;
    .right {
      .item {
        display: flex;
        color: #333;
        font-size: 30rpx;
        padding: 15rpx 20rpx 0rpx;
        flex: 1;
        .title {
          color: #748da7;
          width: 180rpx;
          font-size: 26rpx;
        }
      }
    }
    .icon_box {
      width: 86rpx;
      height: 86rpx;
      margin-right: 10rpx;
    }
  }
}
</style>
